<!--
 * @Author: myw
 * @Email: 516378746@qq.com
 * @Date: 2020-03-02 17:04:07
 * @Descripttion: 
 -->
<div class="search_box">
    <div nz-row nzGutter="16">
        <div nz-col nzSpan="12"></div>
        <div nz-col nzSpan="7">
            <label class="left_label" style="display:inline-block;width:30%;">申请日期段：</label>
            <nz-range-picker nzDropdownClassName="date-range" style="width: 68%;" class="dateSelect" ngModel (ngModelChange)="onDateChange($event)"></nz-range-picker>
        </div>
        <div nz-col nzSpan="5">
            <label>源库房：</label>
            <nz-select nzDropdownClassName="select_custom" nzPlaceHolder="请选择" [(ngModel)]="selectedValue" (ngModelChange)="onSearchHouseChange()" style="width: 74%;">
                <nz-option nzLabel="-请选择-" nzValue=""></nz-option>
                <nz-option *ngFor="let item of sourceHouseData" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
            </nz-select>
        </div>
    </div>
</div>
<!-- <div class="btn_group">
    <button nz-button>确认出库</button>
    <button nz-button>打印单据</button>
</div> -->
<div class="table_box">
    <nz-table #listTable [nzData]="listData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
        <thead>
            <tr>
                <th>物料编码</th>
                <th>物料名称</th>
                <th>批次</th>
                <th>源库房</th>
                <th>源库区</th>
                <th>源库房可用量</th>
                <th>目标库房</th>
                <th>目标库区</th>
                <th>需求移库量</th>
                <th>实际移库量</th>
                <th>挑库类型</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of listTable.data">
                <td>{{ data.materialCode }}</td>
                <td>{{ data.materialName }}</td>
                <td>{{ data.barcodeBatch }}</td>
                <td>{{ data.fromStorehouse.name }}</td>
                <td>{{ data.fromStorehouseArea.name }}</td>
                <td>{{ data.fromStorehouseAmount }}</td>
                <td>{{ data.toStorehouse.name }}</td>
                <td>{{ data.toStorehouseArea.name }}</td>
                <td>{{ data.reqAmount }}</td>
                <td>
                    <input nz-input type="number" [(ngModel)]="data.resAmount">
                </td>
                <td>{{ data.chooseType }}</td>
                <td>
                    <button nz-button nzType="primary" nzSize="small" (click)="submitFn(data)" style="margin-bottom: 4px;">出库</button>
                    <button nz-button nzType="primary" nzSize="small" (click)="returnFn(data)">退回</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>
<div nz-row class="page_box">
    <nz-pagination (nzPageIndexChange)="clickPage($event)" [nzPageIndex]="pageIndex" [nzTotal]="totalSize"
        [nzPageSize]="pagesize" [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
</div>